<template>
  <div class="page">
    <div>
      <h3>案件查询</h3>

      <el-card class="card-box">
        <div slot="header">
          <span>审批流程</span>
        </div>
        <el-steps :active="currentStep" finish-status="success" align-center>
          <el-step v-for="(item, index) in approvalSteps" :key="index" :title="item.title">
            <template slot="description">
              <div class="step_desc">
                <span v-if="item.station">{{ item.station }}</span>
                <span v-if="item.police">{{ item.police }}</span>
                <span v-if="item.desc">{{ item.desc }}</span>
                <span v-if="item.time">{{ item.time }}</span>
                <span v-if="item.tip" class="tip">{{ item.tip }}</span>
              </div>
            </template>
          </el-step>
        </el-steps>
      </el-card>

      <el-card class="card-box">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <div class="basic-box">
          <div class="basic-box-item">
            <div class="basic-box-item-l">
              <span>案件编号：</span>
              <span>{{ caseDetail.case_no }}</span>
            </div>
            <div class="basic-box-item-r">
              <span>案件名称：</span>
              <span>{{ caseDetail.case_name }}</span>
            </div>
          </div>
          <div class="basic-box-item">
            <div class="basic-box-item-l">
              <span>提交民警：</span>
              <span>{{ caseDetail.commit_police }}</span>
            </div>
            <div class="basic-box-item-r">
              <span>提交时间：</span>
              <span>{{ caseDetail.commit_time }}</span>
            </div>
          </div>
          <div class="basic-box-item-s">
            <span>办案民警：</span>
            <span class="mx" v-for="item in caseDetail.police_handle" :key="item.id">{{ item.no }} {{ item.name }} {{
          item.tel
        }}</span>
          </div>
          <div class="basic-box-item">
            <div class="basic-box-item-l">
              <span>当日值班：</span>
              <span>{{ caseDetail.duty_police }}</span>
            </div>
            <div class="basic-box-item-r">
              <span>分配时间：</span>
              <span>{{ caseDetail.assign_time }}</span>
            </div>
          </div>
          <div class="basic-box-item">
            <div class="basic-box-item-l">
              <span>分配民警：</span>
              <span>{{ caseDetail.sign_police }}</span>
            </div>
            <div class="basic-box-item-r">
              <span>签收时间：</span>
              <span>{{ caseDetail.sign_time }}</span>
            </div>
          </div>
          <div class="basic-box-item-s">
            <span>办理时间：</span>
            <span>{{ caseDetail.check_time }}</span>
          </div>
          <div class="basic-box-item-s">
            <span>简要案情：</span>
            <span>{{ caseDetail.case_desc }}</span>
          </div>
          <div class="basic-box-item-s">
            <span>受、立案文书：</span>
            <a class="mx link" v-for="item in caseDetail.case_paper" :key="item.id" :href="item.url" target="_blank">{{
          item.name }}
              下载</a>
          </div>
        </div>
      </el-card>

      <el-card class="card-box">
        <div slot="header">
          <span>要素信息</span>
          <el-button class="btn-right" type="text" @click="addElementInfo">基于此案件信息，延伸其它要素信息</el-button>
        </div>
        <el-table :data="tableData" border>
          <el-table-column prop="elem_no" label="序号" align="center" />
          <el-table-column prop="elem_name" label="姓名" align="center" />
          <el-table-column prop="elem_id" label="证件号" align="center" />
          <el-table-column prop="elem_type" label="要素类型" align="center" />
          <el-table-column prop="elem_val" label="要素值" align="center" />
        </el-table>
      </el-card>

      <el-card class="card-box">
        <div slot="header">
          <span>线索信息</span>
        </div>
        <div class="basic-box-item-s">
          <span>线索来源情况：</span>
          <span>{{ caseDetail.clue_src }}</span>
        </div>
        <div class="basic-box-item-s">
          <span>线索来源文书：</span>
          <a class="mx link" v-for="item in caseDetail.clue_paper" :key="item.id" :href="item.url" target="_blank">{{
          item.name }}
            下载</a>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      approvalSteps: [
        { title: '提交案件', station: '【XXX】派出所', police: '张三,李四', desc: '', time: '2024-03-01 11:30', tip: '', },
        { title: '待审核', station: '【XXX】派出所', police: '王五,赵六', desc: '', time: '2024-03-01 11:30', tip: '缺少XXX资料请补充', },
        { title: '待分配', station: '', police: '', desc: '等待当值人员XXX分配案件,分配结果是XXX', time: '2024-03-01 11:30', tip: '已分配王五处理', },
        { title: '待接收', station: '', police: '二级办案人员', desc: '', time: '2024-03-01 11:30', tip: '缺少XXX资料请补充', },
        { title: '待处理', station: '', police: '二级办案人员', desc: '', time: '2024-03-01 11:30', tip: '', },
        { title: '办理完结', station: '', police: '2024-03-04 12:00', desc: '', time: '', tip: '', }
      ],
      caseDetail: {
        case_no: '20240301',
        case_name: 'XXX案件',
        commit_police: '张三, 13888888888',
        commit_time: '2024-03-01 11:30',
        police_handle: [
          { id: 1, no: '001', name: '张三', tel: '13888888888' },
          { id: 2, no: '002', name: '李四', tel: '13888888888' },
        ],
        duty_police: '张三',
        assign_time: '2024-03-01 11:35',
        sign_police: '王五',
        sign_time: '2024-03-01 11:40',
        check_police: '赵六',
        check_time: '2024-03-01 11:50',
        case_desc: 'XXX案件简要案情简要案情简要案情简要案情简要案情简要案情',
        case_paper: [
          { id: 1, name: '受案文书1', url: 'https://www.w3school.com.cn' },
          { id: 2, name: '立案文书2', url: 'https://cn.bing.com/' },
        ],
        clue_src: 'XXX线索来源线索来源线索来源线索来源线索来源线索来源线索来源',
        clue_paper: [
          { id: 1, name: '线索文书1', url: 'https://www.w3school.com.cn' },
          { id: 2, name: '线索文书2', url: 'https://cn.bing.com/' },
        ],
      },
      tableData: []
    };
  },
  mounted() {
    const data = Array.from({ length: 3 }, (v, k) => {
      return {
        elem_no: k + 1,
        elem_name: '张三',
        elem_id: '123456789012345678',
        elem_type: '手机号',
        elem_val: '18900000000'
      }
    })
    this.tableData = [...data]
  },
  methods: {
    addElementInfo() {
      this.$router.push({ name: 'caseInput', query: { type: 'add', id: this.caseDetail.case_no } })
    }
  },
};
</script>

<style lang="scss" scoped>
.step_desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #909399;

  .tip {
    color: #F56C6C;
  }
}

.card-box {
  .btn-right {
    float: right;
  }
}

.basic-box {
  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;

    &-s {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 16px;

      .mx {
        margin: 0 20px 0 0;

        &.link {
          color: #409EFF;
          cursor: pointer;
        }
      }
    }

    &-l,
    &-r {
      display: flex;
      align-items: center;
    }
  }
}
</style>
